<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>充值</title>
    <script src="../js/vue.js"></script>
    <link href="https://cdn.bootcss.com/element-ui/2.4.5/theme-chalk/index.css" rel="stylesheet">
    <script src="https://cdn.bootcss.com/element-ui/2.6.1/index.js"></script>
    <link rel="stylesheet" href="../layui/css/layui.css">
    <script src="../layui/layui.js"></script>

    <link rel="stylesheet" type="text/css" href="../css/orderPay.css"/>


</head>
<body>


<div id="orderPay" style="margin: 0 50px 0 0; ">


    <div style="margin-left: 50px;margin: 0 50px 0 0;width: 110%;">

        <div style="background-color: #01AAED; width: 100%;line-height: 90px;font-size: 15px;border: 1px solid gray;color: white;">
            <img src="../image/orderP.png" style="color: #FFD471;margin-left: 100px;"></i>
            <span style="font-size: 30px;">填写订单</span>

        </div>


        <div style="width: 100%; ">



            <!-- 主体 -->
            <div class="main" id="cart">
                <div class="cart-wrap">
                    <div class="cart-goods-list">
                        <div class="list-head">
                            <div class="col-pic"></div>
                            <div class="col-name">商品名字</div>
                            <div class="col-price">单价</div>
                            <div class="col-num">数量</div>
                            <div class="col-total">小计</div>
                        </div>
                        <div class="list-body">
                            <div class="col col-pic"><a href="javascript:void(0)" @click="getDetail(cart.pid)"><img
                                    :src="cart.param_image"></a></div>
                            <div class="col col-name" style="font-size: 18px;"><a href="javascript:void(0)"
                                                                                  @click="getDetail(cart.pid)">{{ cart.p_name
                                }}</a></div>
                            <div class="col col-price">{{ cart.price }}元</div>
                            <div class="col col-num">
                                <div class="col-num-d">
                                    <div class="col-num-num">{{ cart.c_number }}</div>
                                </div>
                            </div>
                            <div class="col col-total" style="color:#ff6700;font-size: 18px">
                                {{ cart.c_number * cart.price }}
                            </div>

                            <div class="col-parameter">{{ cart.color }}&nbsp;&nbsp;{{ cart.memory_size }}</div>
                        </div>
                    </div>


                </div>
            </div>
			
			


            <div style="margin: 30px 0 0 170px;float: left">
				
				<div>
					<el-select v-model="value" placeholder="请选择" style="width: auto;">
						<el-option
						  v-for="item in options"
						  :key="item.value"
						  :label="item.label"
						  :value="item.value">
                          <span style="float: left">{{ item.value }}</span>
                          <span style="float: right; color: #8492a6; font-size: 13px">{{ item.name }}</span>
						</el-option>
					</el-select>
					<a href="address.html">添加或修改地址</a>

				</div>
                <div style="font-size: 17px;margin-top: 20px;">
                    <span>手机号：{{ getLabel(value)}}</span>
                    <span  style="margin-left: 70px;"> 收货人：{{ getName(value)}}</span>
                </div>

				

                <div>
                    <div style="height: 50px;font-size: 17px;margin-top: 40px">
                        <span> 支付方法 ： </span>

                        <span style="margin-left: 13px;">
							<input type="radio" name="paymentMethod" value="alipay" title="支付宝支付"
                                   v-model="selectedPaymentMethod" checked>
							<img src="../image/zfbPay.png" :class="{ 'selected': selectedPaymentMethod === 'alipay' }">支付宝支付
						</span>
                        <!--						<span>-->
                        <!--							<input type="radio" name="paymentMethod" value="wechat" title="微信支付" v-model="selectedPaymentMethod">-->
                        <!--							<img src="../image/wxPay.png" :class="{ 'selected': selectedPaymentMethod === 'wechat' }">微信支付-->
                        <!--						</span>-->
                    </div>

                    <div style="line-height: 100px;font-size: 22px;">
<!--                        margin: 40px 0 70px 0;">-->
                        <span>应付金额： {{price}} 元</span>
                    </div>

                    <div style="margin-left: 500px;">
                        <button type="button" class="layui-btn layui-btn-lg" @click="pay()">提交订单</button>
                    </div>

                </div>

                <div>

                </div>

            </div>
        </div>
    </div>

</div>


<script src="../layui/layui.js"></script>
<script src="../js/axios.js"></script>


<script>

    let app = new Vue({
        el: '#orderPay',
        data: {
            value: '',
			options: [],
            cId: 0,
            uId:0,
            aId:1,
            cart: [],
            price: 0,
            selectedPaymentMethod: 'alipay',
        },
        methods: {

            // 显示手机号
            getLabel(value) {
                const option = this.options.find(item => item.value === value);
                return option ? option.iPhone : '';
            },

            // 显示手机号
            getAId(value) {
                const option = this.options.find(item => item.value === value);
                return option ? option.aId : '';
            },

            // 显示收获人
            getName(value) {
                const option = this.options.find(item => item.value === value);
                return option ? option.name : '';
            },


            // 打开支付窗口
            openPaymentWindow(url) {
                return new Promise(function (resolve, reject) {
                    const _this = this;
                    const width = 800;
                    const height = 600;
                    const left = window.innerWidth / 2 - width / 2;
                    const top = window.innerHeight / 2 - height / 2;

                    let paymentWindow = window.open(url, 'payment', 'width=${width},height=${height},left=${left},top=${top}'); // 打开支付页面的弹窗
                    paymentWindow.focus(); // 将焦点设置到支付页面的弹窗


                    // 监听支付窗口的关闭事件
                    const checkWindowClosed = setInterval(function () {
                        if (paymentWindow.closed) {
                            clearInterval(checkWindowClosed); // 停止定时器
                            resolve(); // 支付窗口关闭时调用resolve方法
                        }
                    }, 1000); // 每隔1秒检查支付窗口是否关闭

                });
            },

            // 下划线转驼峰
            toBean(str) {
                var re = /-(\w)/g;
                return str.replace(re, function ($0, $1) {
                    return $1.toUpperCase();
                });
            },

            pay() {
                let _this = this;

                //支付宝沙箱http://localhost:8888/alipay/pay?subject=测试商品&traceNo= 666&totalAmount=1000
                axios.get("../pay", {
                    params: {
                        // subject:'商品名',
                        // traceNo: 数量,
                        total_amount: _this.price  // 传递金额参数给后端
                    }
                }).then(response => {
                    layer.open({
                        title: '订单发送完毕',
                        content: '点击跳转支付界面',
                        btn: ['确定'],
                        yes: function (index, layero) {
                            // 关闭弹窗
                            layer.close(index);
                            _this.openPaymentWindow(response.data).then(() => {
                                axios.get('../queryTrade').then((response) => {
                                    if (response.status == 200) {

                                        let data = _this.cart;
                                        console.log(data);

                                        layer.open({
                                            title: '支付成功',
                                            content: '点击关闭',
                                            btn: ['确定'],
                                            yes: function (index, layero) {
                                                // 支付成功 加上你的操作
                                                axios.get('../order?op=addOrder',
                                                    {
                                                        params:{
                                                            paramId: _this.cart.param_id,
                                                            pNumber: _this.cart.c_number,
                                                            uId: _this.uId,
                                                            oPrice: _this.cart.price,
                                                            aId: _this.aId,
                                                            totalPrice: _this.price,
                                                            // temp: this.temp
                                                            // accievePhone: _this.value
                                                        }
                                                    }
                                                ).then(rs => {
                                                    if (rs.status == 200) {
                                                        axios.get('../cart?op=remove&cId=' + _this.cId).then((response) => {
                                                            if (response.status == 200) {
                                                                window.location.href = 'ShoppingCart.html';
                                                            }
                                                        });
                                                    }
                                                });
                                            }
                                        });
                                    }
                                })

                            });
                        }
                    });

                }).catch(error => {
                    layer.msg(error);
                });
            },

            /**
             * 统一请求处理
             */
            loading() {
                const _this = this;

                axios.get('../cart?op=selectCart', {
                    params: {
                        cId: _this.cId
                    }
                }).then(response => {
                    if (response.status === 200) {
                        _this.cart = response.data.data;
                        console.log(response.data.data);
                        console.log(_this.cart);
                    }
                }).catch(error => {
                    console.error(error);
                });

                axios.get('../address?op=FindAll',{params:{uId:_this.uId}}).then(response => {
                    if (response.status === 200) {
                        let data = response.data.data;
                        console.log(response.data.data);
						for (let i = 0; i < data.length; i++) {
                            let item = data[i]
                            _this.options.push({
                                value:  item.aName,
                                label:  item.aName,
                                iPhone: item.accievePhone,
                                aId: item.aId,
                                name: item.accieveName
                            })
                        }
                    }
                }).catch(error => {
                    console.error(error)
                });


            },
        },
        mounted() {
            const _this = this;
            _this.uId = localStorage.getItem('uId');
            _this.cId = localStorage.getItem("cId");
            _this.price = localStorage.getItem("totalPrice")
            // alert(_this.cId);
            _this.loading();
           /* // 弹出加载提示
            var index = layer.load(1, {
                shade: [0.5,'#000'] // 加载提示的样式
            });

            // 模拟1秒后加载完成
            setTimeout(function(){
                layer.close(index); // 关闭加载提示
                // 这里是加载完成后要执行的代码
                window.location.href = 'pay.html';//重定向
            }, 1000); // 1000毫秒 = 1秒*/

        }

    })

</script>

</body>
</html>

